$(function () {
    $.ajax({
        url: "../json/data1.json"
    })
        .then(function (res) {
            x6(res.data4)
            x(res.data5)
            move_x8(res.data6)
            dianx8(res.data7)
            dianx4(res.data7)
            lie(res.data8)
            
        }).then(function(){
            foolr()
            $(".lazy").lazyload();
        })

    // 轮播图隐藏信息
    function lie(res) {
        $(".lie").html($.map(res, function (item) {
            return `
            <a href="#">
            <img src="${item.dataoriginal}" alt="">
            <span>${item.name}</span>
            </a>
            
            `
        }).join(""))
    }


    //    轮播图下6个小图片
    function x6(res) {
        $(".x6").html($.map(res, function (item) {
            return `<a href="#"><img class="lazy" data-original="${item.src}" alt="">${item.name}</a>`
        }).join(""))
    }
    //    轮播图下内容
    function x(res) {
        $(".x").append($.map(res, function (item) {
            return `<div class="x3"> <a href="${item.src}}"><img class="lazy" data-original="${item.image}" alt=""></a></div>`
        }).join(""))
    }
    //    有换页按钮的内容
    var $mingx_movex8 = $(".mingx-movex8")
    function move_x8(res) {
        $mingx_movex8.html($.map(res, function (item) {
            return `<div>
            <a href="javascript:void(0)">
            <img class="lazy" data-original="${item.image}" alt=""></a>
            <h4>${item.title}</h4>
            <p>${item.figuretitle}</p>
            <span class="s1">${item.price}</span>
            <span class="s2">${item.del}</span>
        </div>`
        }).join(""))
    }
    //    两个点击事件
    $(".mingx-left").on("click", function () {
        $mingx_movex8.stop(true).animate({
            left: 0
        }, 500)
    })
    $(".mingx-right").on("click", function () {
        $mingx_movex8.stop(true).animate({
            left: -1140
        }, 500)
    })
    //    电视栏内容
    // 冰箱栏内容
    function dianx8(res) {
        $(".dianx8").html($.map(res, function (item) {
            return `<div class="box1">
                <a href="javascript:void(0)">
                <img class="lazy" data-original="${item.image}" alt=""></a>
                <h4>${item.title}</h4>
                <p>${item.figuretitle}</p>
                <span class="s1">${item.price}</span>
                <span class="s2">${item.del}</span>
            </div>
                `
        }).join(""))
    }
    // 电器栏和下面几个栏的内容
    function dianx4(res) {
        $(".dianx4").html($.map(res, function (item, index) {
            if (index > 3) {
                return ""
            }
            return `<div class="box1">
                <a href="javascript:void(0)">
                <img class="lazy" data-original="${item.image}" alt=""></a>
                <h4>${item.title}</h4>
                <p>${item.figuretitle}</p>
                <span class="s1">${item.price}</span>
                <span class="s2">${item.del}</span>
            </div>
                `
        }).join(""))
    }


    function foolr() {
        // 楼梯
        var $foolr = $(".floor li")
        var $title = $(".title")
        var height = [];
        $(window).scroll(function () {
            var scrolltop = $("html,body").scrollTop();
            if (scrolltop >= 600) {
                $(".floor").stop(true).animate({
                    opacity: 1,
                }, 300)
            } else {
                $(".floor").stop(true).animate({
                    opacity: 0,
                }, 300)
            }
        })
        for (var i = 0; i < $title.length; i++) {
            var _top = $title.eq(i).offset().top
            _top -= 80
            height.push(parseInt(_top))
        }
        $foolr.click(function () {
            var index = $(this).index();
            $("html,body")
                .stop(true)
                .animate({
                    scrollTop: height[index]
                });
        });
    }



})